<!-- 头部 -->
<template>
  <div class="header">
    <el-menu class="side-menu" :default-active="$route.path" @select="handleMenuSelect" mode="horizontal">
      <el-menu-item index="/content">
        首页
      </el-menu-item>
      <el-menu-item index="/lifesharing">
        生活分享
      </el-menu-item>
      <el-menu-item index="/learningexchange">
        学习交流
      </el-menu-item>
      <el-menu-item index="/suggestion">
        板块建设建议
      </el-menu-item>
      <el-menu-item index="/personal">
        个人中心
      </el-menu-item>
      <el-menu-item index="/manage">
        后台管理
      </el-menu-item>
    </el-menu>
    <div v-show="!$route.path.includes('/search')">
      <el-input v-model="searchText" placeholder="请输入内容" prefix-icon="el-icon-search" width :clearable="true"
        style="width: 200px;" size="small"></el-input>
      <el-button type="primary" @click="search" size="small" style="margin-left: 8px;">查询</el-button>
    </div>
    <!-- 个人头像 -->
    <div class="head_sculpture" >
      <el-dropdown style="float: right;" @command="handleCommand" v-if="user.id">
        <span class="el-dropdown-link" style="cursor: pointer" >
          欢迎你！{{ user.username }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown" >
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="bts" v-if="!user.id">
      <el-button type="primary" @click="$router.replace('/login')" size="small" style="margin-left: 8px;"
        round>登录</el-button>
      <el-button type="primary" @click="$router.replace('/register')" size="small" style="margin-left: 8px;"
        round>注册</el-button>
    </div>
  </div>





</template>

<script>
export default {
  data() {
    return {
      // 搜索框内容
      searchText: '',
      // 判断用户
      user: {}

    }
  },
  // 方法入口
  methods: {
    // 搜索
    search() {
      this.$router.push({ path: '/search', query: { searchText: this.searchText } });
    },
    //退出登录
    logout() {
      console.log("点击了")
      //清空session
      sessionStorage.setItem('user', null);
      this.$router.replace('/login');
    },
    handleMenuSelect(index) {
      // 判断是否是管理页面，需要管理员权限
      if (index === "/manage" && this.user.userRole !== 2) {
        // 没有权限，弹出警告并返回
        this.$notify({
          title: '警告',
          message: '无权限',
          type: 'warning'
        });
        return;  // 提前返回，避免后续代码执行
      }

      // 路由跳转
      this.$router.push(index);
    },
    handleCommand(command) {
      if (command === 'logout') {
        this.logout()

      }
    },


  },

  mounted(){
    this.user = sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : {}
  },
  // created() {
  //   this.user = sessionStorage.getItem('user') ? JSON.parse(sessionStorage.getItem('user')) : {}
  // },



}
</script>

<style scoped>
.header {
  background-color: white;
  color: 90939;
  height: 60px;
  /* flex布局 */
  display: flex;
  align-items: center;
  /* 设置字体为微软雅黑 24px */
  font-family: '微软雅黑';
  font-size: 16px;
  justify-content: center;
  align-items: center
}

.header>.head_sculpture {
  display: flex;
}

.header>.head_sculpture {
  margin-left: 82px;
}


/* 登录 注册按钮 样式 */
.bts {
  margin-left: 126px;
}


/* elementui样式修改 */
/* 去除分隔符 */
.el-breadcrumb>.el-breadcrumb__item>.el-breadcrumb__separator {
  display: none;
}

.el-breadcrumb {
  margin-left: 126px;
}

.el-breadcrumb__item {
  padding: 20px;
}

/* .el-input__inner{
  width: 60px;
} */

.el-breadcrumb__inner a,
.el-breadcrumb__inner.is-link {
  color: #666;
}

>>>.el-menu.el-menu--horizontal {
  border-bottom: none;
}
</style>